﻿@model chihuopig.DTO.ArticleWriterDTO
@section Header{
    <style>
        #Imgsrc {
            opacity: 0;
            height: 100px;
           
        }
        .layuidesc {
            border: solid 1px #e6e6e6;
            height: 100px;
        }
    </style>
}
<div class="x-body">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>文章标题
            </label>
            <div class="layui-input-inline">
                <input type="text" id="Title" name="Title" required="" lay-verify="required"
                       autocomplete="off" value="@(Model.article==null?"":Model.article.Title)" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>将会成为您唯一的登入名
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>作者</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="WriterId" id="WriterId">
                        @foreach (var item in Model.writers)
                        {
                            <option value="@item.Id" @(Model.article != null ? (item.Id == Model.article.Id ? "selected" : "") : "")>@item.Name</option>
                        }
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>文章封面图
            </label>
            <div class="layui-input-inline layuidesc" id="backimgsrc"style="@(Model.article==null?"":Model.article.Imgsrc)">
                <input type="file" name="Imgsrc" id="Imgsrc"  required class="layui-input" />
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>将会成为您唯一的登入名
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>内容</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <script id="editor" type="text/plain" style="width:700px;height:400px;">
                    </script>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <input type="button" class="layui-btn" value="提交" id="btnSave" />
        </div>
    </form>
</div>
@section footer
{
<script type="text/javascript" charset="utf-8" src="/js/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor.all.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/js/zh-cn.js"></script>
    <script>
     var ue = UE.getEditor('editor');
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;
        $("#Imgsrc").change(function (e) {
            var readn = new FileReader();
            var file = e.delegateTarget.files[0];
            
            readn.readAsDataURL(file);
            readn.onload = function () {
                $("#backimgsrc").attr("style", "background:url('" + this.result + "') no-repeat center;");

                 //alert($("#backimgsrc").css("background-image").substring(5));
                //alert(this.result);
               //readn.result;

            }

        })
       
        $("#btnSave").click(function () {

            if ($("input[name='Title']").val() == "") {
                layer.msg("标题不能为空", { icon: 2});
                return;
            }
            if ($("input[name='Title']").val().length > 100) {
                layer.msg("标题最大长度100", { icon: 2 });
                return;
            }

            if ($("#backimgsrc").css("background-image")=="none")
            {
                layer.msg("请上传图片", { icon: 2 });
                return;
            }
            var img = $("#backimgsrc").css("background-image");
            var lastimg = img.substring(5, img.length - 2);
           //alert(ue.getContent());
          $.post("../AdminArticle/Add",
            {
                "Title": $("input[name='Title']").val(),
                "Imgsrc": lastimg,
                "WriterId": $("#WriterId").find("option:selected").val(),
                "Centonet": ue.getContent()
               }, function (data)
               {
                    if (!data.succeed)
                    {

                        layer.msg(data.msg);
                    }
                    else
                    {
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                    }
             })
        });
    });
    </script>
}


